<%--
  Created by IntelliJ IDEA.
  User: abb
  Date: 2018-07-09
  Time: 16:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/js/jquery-easyui/themes/icon.css">
    <script type="text/javascript" src="/static/js/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <script>
        

        $(function () {

            var permissionAllData = {};

            $('#roleDataGrid').datagrid({
                url:"/role/list",
                fit:true,
                fitColumns:true,
                border:false,
                rownumbers:true,
                pagination:true,
                singleSelect:true,
                toolbar:'#roleToolBar',
                columns:[[
                    {field:'name',title:'角色名称',width:100},
                    {field:'sn',title:'角色编号',width:100}
                ]]
            });


            $("#allPermission").datagrid({
                url:'/permission/listAll',
                rownumbers:true,
                fit:true,
                singleSelect:true,
                fitColumns:true,
                columns:[[
                    {field:'name',title:'权限名称',width:100}
                ]],
                onDblClickRow:function (index ,row) {

                    $("#selfPermission").datagrid("appendRow",row);

                    $("#allPermission").datagrid("deleteRow",index);
                },
                onLoadSuccess:function (data) {


                    permissionAllData = jQuery.extend(true,{}, data);
                }

            });
            $("#selfPermission").datagrid({
                rownumbers:true,
                fit:true,
                singleSelect:true,
                fitColumns:true,
                columns:[[
                    {field:'name',title:'权限名称',width:100}
                ]],
                onDblClickRow:function (index ,row) {

                    $("#allPermission").datagrid("appendRow",row);

                    $("#selfPermission").datagrid("deleteRow",index);
                },
                onLoadSuccess:function (data) {
                    var ids = $.map(data.rows,function (item) {
                        return item.id;
                    });

                    var leftRows = $("#allPermission").datagrid("getRows");

                    for(var i = leftRows.length-1 ; i >= 0 ;i--){
                        var leftRowId = leftRows[i].id;

                        if($.inArray(leftRowId,ids) >= 0){
                            $("#allPermission").datagrid("deleteRow",i);
                        }
                    }
                }
            });


            $("#roleDialog").dialog({
                buttons:'#roleDialogButtons',
                closed:true,
                width:750
            });



            var cmdObj = {
                cancel: function ()
            {
                $("#roleDialog").dialog("close");
            },
                reload : function () {
                $("#roleDataGrid").datagrid("reload");
            },

                save : function () {
                var url = "/role/save";
                var roleId = $("#roleId").val();
                if (roleId) {
                    url = "/role/update";
                }

                $("#roleDialogForm").form("submit", {
                    url: url,
                    onSubmit: function (param) {
                        var rows = $("#selfPermission").datagrid("getRows");

                        for (var i = 0; i < rows.length; i++) {
                            var row = rows[i];
                            param['permissions[' + i + '].id'] = row.id;
                        }


                    },
                    success: function (data) {
                        data = $.parseJSON(data);
                        if (data.success) {
                            $.messager.alert("提示", "操作成功", "info", function () {
                                cmdObj.cancel();
                                cmdObj.reload();
                            })
                        } else {
                            $.messager.alert("提示", data.msg, "error");
                        }
                    }
                });
            },
                closeRole:function () {

                var select = $("#roleDataGrid").datagrid("getSelected");
                if(!select){
                    $.messager.alert("提示","请选择一行","info");
                    return;
                }
                $.messager.confirm("提示","确定要删除吗",function (yes) {
                    if(yes){
                        $.post("/role/delete",{"id":select.id},function (data) {
                            if(data.success){
                                $.messager.alert("提示","成功","info",function () {
                                    cmdObj.reload();
                                })
                            }else{
                                $.messager.alert("提示",data.msg,"error");
                            }
                        })
                    }
                })
            },
                add : function () {
                $("#selfPermission").datagrid("loadData", {total: 0, rows: []});


                $("#allPermission").datagrid("loadData", permissionAllData);

                $("#roleDialogForm").form("clear");
                $("#roleDialog").dialog("setTitle", "add");
                $("#roleDialog").dialog("open");
            },

                edit : function () {
                var selectedRow = $("#roleDataGrid").datagrid("getSelected");

                if (!selectedRow) {
                    $.messager.alert("提示", "请选择一行", "error");
                    return;
                }

                $("#roleDialogForm").form("load", selectedRow);

                $("#allPermission").datagrid("loadData", permissionAllData);


                $.post("/permission/queryByRoleId", {roleId: selectedRow.id}, function (data) {

                    $("#selfPermission").datagrid("loadData", data);
                });



                $("#roleDialog").dialog("setTitle", "edit");
                $("#roleDialog").dialog("open");
            }

        }

            $("a[data-cmd]").click(function () {
                var cmd = $(this).data("cmd");
                cmdObj[cmd]() ;
            });
        });


    


    </script>
</head>
<body>
<div id="roleDialog">
    <form id="roleDialogForm" method="post">
        <input type="hidden" name="id" id="roleId">
        <table>
            <tr>
                <td>角色编号</td>
                <td>
                    <input class="easyui-textbox" style="width:300px" name="sn">


                </td>
            </tr>
            <tr>
                <td>角色名称</td>
                <td>
                    <input class="easyui-textbox" style="width:300px" name="name">
                </td>
            </tr>
                <td style="height: 300px;width:300px"><table id="allPermission"></table></td>
                <td style="height: 300px;width:200px"><table id="selfPermission"></table></td>
            </tr>
        </table>
    </form>
</div>
<div id="roleDialogButtons">
    <a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" data-cmd="save">确定</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" data-cmd="cancel" >取消</a>
</div>
<div id="roleToolBar">
    <a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"  data-cmd="add">新增</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" data-cmd="edit" >编辑</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" data-cmd="closeRole" >撤销</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" data-cmd="reload" >刷新</a>
</div>
<table id="roleDataGrid"></table>
</body>
</html>
